<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>活动申请</title>
    <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
</head>
<body>

<table id="demo" lay-filter="test"></table>

<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script>
    layui.use(['table', 'layer', 'jquery'], function () {
        var table = layui.table;
        var layer = layui.layer;
        let $ = layui.jquery;

        table.render({
            elem: '#demo',
            height: 'auto',
            url: '/activity/getActivityList', //数据接口,
            page: true, //开启分页
            toolbar: '#toolbarDemo', //开启头部工具栏，并为其绑定左侧模板
            cols: [[ //表头
                {field: 'actApplyId', title: '活动申请编号', width: "10%", fixed: 'left'},
                {field: 'studentId', title: '学生学号', width: "10%"},
                {field: 'studentName', title: '学生姓名', width: "10%"},
                {field: 'studentAcademy', title: '学生学院', width: "10%"},
                {field: 'activityCategory', title: '活动种类', width: "10%"},
                {field: 'activityContent', title: '活动内容', width: "10%"},
                {field: 'activityAmount', title: '活动人数', width: "10%"},
                {field: 'startTime', title: '开始时间', width: "10%"},
                {field: 'closeTime', title: '结束时间', width: "10%"},
                {field: 'applyReason', title: '申请原因', width: "10%"},
                {field: 'applyDate', title: '申请日期', width: "10%"},
                {
                    field: 'status', title: '申请状态', width: "10%", fixed: 'right', templet(data) {
                        switch (data.status) {
                            case '1':
                                return '已通过';
                            case '2':
                                return '未通过';
                            case '3':
                                return '等待中';
                        }

                    }
                },
            ]],
            response: {
                statusCode: 200,//规定成功的状态码，默认：0
            },
            parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "count": res.data.total, //解析数据长度
                    "data": res.data.list //解析数据列表
                };
            }
        });



        //头工具栏事件
        table.on('toolbar(test)', function (obj) {
            switch (obj.event) {
                case 'add':
                    // 增加活动
                    layer.open({
                        type:2,
                        content:'/activity/addActivity',
                        area: ['100%', '100%'],
                        closeBtn: 0,
                        title: false
                    })
                    break;
            };
        });

    });
</script>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">增加活动</button>
    </div>
</script>
</body>
</html>